<!--
 * @Author: hifishroom
 * @Date: 2021-08-23 16:06:06
 * @LastEditTime: 2021-08-30 13:15:08
 * @FilePath: \backstage\src\views\home\IntroduceView.vue
-->
<template>
  <div class="Introduce flex">
    <div class="introduce-video">
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      >
      </video-player>
    </div>
    <div>
      <tab-control
        :title="title"
        :songClass="introClass"
        @tabClick="tabClick"
      />
      <div class="Introduce-text twin">{{ isList }}</div>
    </div>
  </div>
</template>

<script>
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import TabControl from "components/content/tabControl/TabControl.vue";
export default {
  components: { TabControl, videoPlayer },
  name: "IntroduceView",
  data() {
    return {
      title: ["部队简介", "部队文化", "资质荣誉"],
      introClass: "h-song-push",
      currentType: "brief",
      introDataList: {
        brief:
          "军队也称为武装力量，指被授权使用致命武力及武器来保护其国家人民的利益的常规武装力量。军队的任务一般会是保护国家及人民，以及对其他国家发动战争。也有些国家的常规武装力量不称为军队，例如日本自卫队、德国联邦国防军。军队大约由陆军（或包含宪兵）、海军（或包含海军陆战队）、空军（或包含防空部队）等军种所组成，有些还包括特种部队、战略导弹部队、太空部队、电子战部队等。并在军人之中划有军官、士官、士兵等军衔。军队可以利用国家义务役或者募兵来补充兵源。",
        culture:
          "约于公元前4世纪至前6世纪初，古代埃及、苏美尔、阿卡得、乌尔、巴比伦、赫梯、亚述、乌拉尔图、印度等早期奴隶制国家出现了军队，作为掠夺奴隶、家畜和财产，镇压奴隶起义的工具。军队的成员主要是奴隶主和自由民。兵种主要是步兵，有的有车兵、骑兵，有的还组建了海上舰队。初期使用木、石兵器，后来有了铜、铁制冷兵器。交战时实施正面冲击。公元前6世纪以后，古希腊、古罗马等奴隶制国家先后出现了民军。民军按财产标准编队，最富有的奴隶主编为骑兵，占有较多土地的奴隶主编为重装步兵，无全权者和随军作仆役的奴隶组成轻装步兵。一般编十人队、百人队，采取密集的方阵作战，最大方阵达万人。公元前5世纪，雅典和斯巴达的军队先后由民军过渡为雇佣常备军。公元前2世纪，古罗马的奴隶主民军也被雇佣常备军所取代。以重装步兵、轻装步兵和骑兵混编的军团为基本单位，下辖若干中队、小队、百人团，主要使用铁制矛、剑、标枪、弓箭等武器和云梯、碉楼、攻城槌、弩炮等攻城器材，逐渐废弃方阵战术，把士兵摆成前、中、后三列作战。",
        honor:
          "自公元4世纪起，在欧、亚一些国家，随着奴隶制崩溃，封建制逐渐形成，军队变为地主和贵族夺取领地、镇压平民的工具。在欧洲长达千年的中世纪中，骑兵成为军队的主力。步兵人数虽多，但组织松散，在作战中一般担负辅助任务。15世纪以后，火枪、火炮大量装备军队，引起军队结构不断变化。步兵重新成为主要作战力量，出现了连、营、团、旅等正规编制。西欧各国建立起常备雇佣军。"
      },
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 类型
            src: "https://oklan201020.oss-cn-chengdu.aliyuncs.com/aa.mp4" // url地址
          }
        ],
        poster:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbig5.gov.cn%2Fgate%2Fbig5%2Fwww.gov.cn%2Fjrzg%2Fimages%2Fimages%2F1c6f6506c7f8113527b902.jpg&refer=http%3A%2F%2Fbig5.gov.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632883487&t=915f324d2b3425397675898c33ceb512", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    };
  },

  computed: {
    isList() {
      return this.introDataList[this.currentType];
    }
  },
  methods: {
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "brief";
          break;
        case 1:
          this.currentType = "culture";
          break;
        case 2:
          this.currentType = "honor";
          break;

        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss">
.h-song-push {
  div {
    div {
      @for $i from 0 through 2 {
        &:nth-child(#{$i}) {
          ::after {
            content: "";
            display: inline-block;
            width: 0px;
            height: 10px;
            margin-left: 10px;
            border: 0.1px solid rgb(221, 210, 210);
          }
        }
      }
    }
  }
}

.Introduce {
  margin-top: 20px;
  gap: 20px;
}

.introduce-video {
  max-width: 60%;
  min-width: 40%;
  border-radius: 4px;
  overflow: hidden;
}

.video-js .vjs-big-play-button {
  top: 43%;
  left: 40%;
}

.Introduce-text {
  margin-top: 20px;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  color: #303133;
  line-height: 1.8;
  font-size: 18px;
}

.video-player {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #30313342;
    z-index: 8;
  }

  &:hover {
    &::before {
      display: none;
    }
  }
}

.vjs-poster {
  background-size: cover;
}
</style>
